<template>
  <div class="footer-music" v-show="$store.state.user.isShowFooterMusic">
    <div style="display: flex;align-items: center">
      <img class="img_gequ" :class="[isPlay?'img_gequ_active':'img_gequ_paused']"
           :src="playLists[playListIndex].al.picUrl">
      <div style="display: flex;flex-direction: column;margin-left: 0.3rem" @click="updateDetailShow">
        <span style="font-weight: bold">{{ playLists[playListIndex].name }}</span>
        <span>滑动切换歌曲</span>
      </div>
    </div>
    <div style="display: flex;align-items: center;margin-right: 0.2rem">
      <van-icon size="0.8rem" name="pause-circle" @click="playOrPausedMusic" v-if="isPlay"/>
      <van-icon size="0.8rem" name="play-circle" @click="playOrPausedMusic" v-else/>
      <van-icon size="0.8rem" name="bars"/>
    </div>
  </div>
  <audio ref="musicRudio" :src="`https://music.163.com/song/media/outer/url?id=${playLists[playListIndex].id}`"></audio>
  <van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%',width:'100%' }">
    <MusicDetail :musicList="playLists[playListIndex]" :playOrPausedMusic="playOrPausedMusic"
                 :isPlay="isPlay"></MusicDetail>
  </van-popup>
</template>

<script>
import {mapMutations, mapState} from "vuex/dist/vuex.mjs";
import MusicDetail from "./MusicDetail";

export default {
  name: "FooterMusic",
  components: {MusicDetail},
  data() {
    return {
      myInterval: 0
    }
  },
  computed: {
    ...mapState('footer', ['playLists', 'playListIndex', 'isPlay', 'detailShow']),
    ...mapMutations('footer', ['updateDetailShow'])
  },
  mounted() {
    this.$store.dispatch('footer/getLyric', this.playLists[this.playListIndex].id)
    // this.updateTime()
  },
  updated() {
    this.$store.dispatch('footer/getLyric', this.playLists[this.playListIndex].id)
  },
  methods: {
    playOrPausedMusic() {
      if (this.$refs.musicRudio.paused) {
        // 当前是暂停，就播放
        this.$refs.musicRudio.play()
        // 歌曲播放时,就调用函数，触发定时器，定时去修改vuex中歌词的时间进度
        this.updateTime()
      } else {
        this.$refs.musicRudio.pause()
        // 歌曲暂停时，即刻清理掉定时器
        clearInterval(this.myInterval)
      }
      // this.changePlayStatus()
      this.$store.commit('footer/changePlayStatus')
    },
    // 更新歌曲进度
    updateTime() {
      setInterval(() => {
        this.myInterval = this.$store.commit('footer/updateCurrentTime', this.$refs.musicRudio.currentTime)
      }, 500)
    }
  },
  watch: {
    // 监听歌曲列表下标，发生改变时意味着切歌了，就自动播放刚切换的歌曲
    playListIndex() {
      this.$refs.musicRudio.autoplay = true
    },
  }
}
</script>

<style scoped>
.footer-music {
  display: flex;
  justify-content: space-between;
  height: 1.4rem;
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 3px solid #eee;
  background-color: #fff
}

.img_gequ {
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-left: 0.2rem;
  /*动画：xuanzhuan 10s一圈 匀速 无限循环*/
  animation: xuanzhuan 10s linear infinite;
}

/*激活状态时，动画播放*/
.img_gequ_active {
  animation-play-state: running;
}

/*失活状态时，动画暂停*/
.img_gequ_paused {
  animation-play-state: paused;
}

/*自定义图片旋转动画*/
@keyframes xuanzhuan {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>